﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <style scoped>
        .email-sending-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }

        .page-title {
            text-align: center;
            margin-bottom: 30px;
            font-size: 24px;
            color: #333;
        }

        .email-form {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 30px;
        }

        .is-error {
            border-color: #f56c6c;
        }

        .error-tip {
            color: #f56c6c;
            font-size: 12px;
            margin-top: 5px;
        }

        .upload-list {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="email-sending-container">
            <h1 class="page-title">发送邮件到 QQ 邮箱</h1>

            <el-form ref="emailFormRef"
                     :model="emailForm"
                     :rules="rules"
                     label-width="100px"
                     class="email-form">
                <!-- 发件人信息 -->
                <el-form-item label="发件人" prop="from">
                    <el-input v-model="emailForm.from" disabled placeholder="系统默认发件人" />
                </el-form-item>

                <!-- QQ 邮箱收件人 -->
                <el-form-item label="收件人" prop="to">
                    <el-input v-model="emailForm.to"
                              placeholder="请输入 QQ 邮箱（如 123456@qq.com）"
                              :class="{ 'is-error': emailForm.to && !isValidQQEmail(emailForm.to) }" />
                    <div v-if="emailForm.to && !isValidQQEmail(emailForm.to)" class="error-tip">请输入正确的 QQ 邮箱格式</div>
                </el-form-item>

                <!-- 邮件主题 -->
                <el-form-item label="主题" prop="subject">
                    <el-input v-model="emailForm.subject" placeholder="请输入邮件主题" />
                </el-form-item>

                <!-- 邮件内容 -->
                <el-form-item label="内容">
                    <el-input v-model="emailForm.content"
                              type="textarea"
                              :rows="5"
                              placeholder="请输入邮件内容" />
                </el-form-item>

                <!-- 附件上传 -->
                <el-form-item label="附件">
                    <el-upload action="#"
                               list-type="picture"
                               :on-change="handleFileChange"
                               :file-list="fileList"
                               :auto-upload="false"
                               multiple>
                        <el-button type="primary" size="small">选择文件</el-button>
                    </el-upload>
                    <div v-if="fileList.length > 0" class="upload-list">
                        <el-tag v-for="(file, index) in fileList" :key="index" closable v-on:close="handleRemove(file)">{{ file.name }}</el-tag>
                    </div>
                </el-form-item>

                <!-- 发送按钮 -->
                <el-form-item>
                    <el-button type="primary" v-on:click="sendEmail">发送邮件</el-button>
                    <el-button v-on:click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>

            <!-- 加载状态 -->
            <el-loading v-loading="loading" :fullscreen="false" target=".email-form" />
        </div>
    </div>

    <script type="text/javascript">
        const { createApp, reactive, ref, toRefs } = Vue;
        const { ElMessage } = ElementPlus;

        const app = createApp({
            setup() {
                // 响应式状态
                const state = reactive({
                    emailForm: {
                        from: "your-email@example.com",
                        to: "",
                        subject: "",
                        content: "",
                        attachments: []
                    },
                    rules: {
                        to: [{ required: true, message: "请输入收件人 QQ 邮箱", trigger: "blur" }],
                        subject: [{ required: true, message: "请输入邮件主题", trigger: "blur" }],
                        content: [{ required: true, message: "请输入邮件内容", trigger: "blur" }]
                    },
                    fileList: [],
                    loading: false
                });

                // 表单引用
                const emailFormRef = ref(null);

                // 验证 QQ 邮箱格式
                const isValidQQEmail = (email) => {
                    return /^[1-9]\d{4,10}qq\.com$/.test(email);
                };

                // 处理文件选择
                const handleFileChange = (file, fileList) => {
                    state.fileList = fileList;
                    state.emailForm.attachments = fileList.map(f => f.raw);
                };

                // 移除附件
                const handleRemove = (file) => {
                    state.fileList = state.fileList.filter(f => f.uid !== file.uid);
                    state.emailForm.attachments = state.fileList.map(f => f.raw);
                };

                // 重置表单
                const resetForm = () => {
                    emailFormRef.value.resetFields();
                    state.fileList = [];
                    state.emailForm.attachments = [];
                };

                // 发送邮件
                const sendEmail = () => {
                    emailFormRef.value.validate((valid) => {
                        if (valid) {
                            // 验证邮箱格式
                            // if (!isValidQQEmail(state.emailForm.to)) {
                            //     ElMessage.error("请输入正确的 QQ 邮箱格式");
                            //     return;
                            // }

                            state.loading = true;

                            // 创建FormData处理文件上传
                            const formData = new FormData();
                            formData.append("to", state.emailForm.to);
                            formData.append("subject", state.emailForm.subject);
                            formData.append("content", state.emailForm.content);

                            // 添加附件
                            state.fileList.forEach(file => {
                                formData.append("attachments", file.raw, file.name);
                            });

                            // 发送请求
                            axios.post("/Home/SendQQEmail", formData, {
                                headers: {
                                    "Content-Type": "multipart/form-data"
                                }
                            })
                            .then(response => {
                                if (response.data.code === 200) {
                                    ElMessage.success("邮件发送成功！");
                                    resetForm();
                                } else {
                                    ElMessage.error(response.data.message || "邮件发送失败，请重试");
                                }
                            })
                            .catch(error => {
                                console.error("发送邮件失败:", error);
                                ElMessage.error("网络错误，邮件发送失败");
                            })
                            .finally(() => {
                                state.loading = false;
                            });
                        }
                    });
                };

                // 返回所有需要暴露的属性和方法
                return {
                    ...toRefs(state),
                    emailFormRef,
                    isValidQQEmail,
                    handleFileChange,
                    handleRemove,
                    resetForm,
                    sendEmail
                };
            }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>